"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/6
 */
import * as React from 'react'
import {commonProps, commonStyles} from "../../assets/styles/common";
import MyText from "../../component/MyText";
import {activeStyles} from "../../assets/styles/community";
import MyIcon from "../../component/icon";

const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {activeList} from "../../assets/data";
import Line from "../../component/Line";
import Avatar from "../../component/Avatar";
import {groupStyles} from "../../assets/styles/groups";

import NavBackButton from "../../component/BackButton";
import {ActivePage} from "../../interface/router";

const {View, TouchableOpacity, FlatList} = require('react-native');
const {connect} = require('react-redux');
const {List} = require('antd-mobile');
const moment = require("moment");

const avatarProps = {
    borderWidth: 1,
    borderColor: '#fff',
    size: 35,
};

class MyActivesPage extends React.Component<ActivePage, any> {

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            activeList
        }
    }

    joinOrLeaveActive = (active: activity) => {
        this.props.dispatch({
            type: 'active/joinOrLeaveActive',
            payload: {active,from:'myActives'}
        })
    };

    renderMembers = (members) => {
        return members.map((item, index) => {
            return <Avatar key={index} {...avatarProps}
                           style={[groupStyles.member, {zIndex: 8 - (index * 2), backgroundColor: '#DC6451'}]}
                           source={item}/>
        })
    };

    renderItem = (i) => {
        const item: activity = i.item;
        return (
            <TouchableOpacity onPress={Actions.activeDetail.bind(null, {item})}>
                {/*月份*/}
                <View style={[activeStyles.listItem, activeStyles.header]}>
                    <MyText color={'#333'} fontSize={15}>{moment(item.created).format('MM月DD日')}</MyText>
                </View>
                {/*内容*/}
                <View style={[activeStyles.listItem, activeStyles.item, activeStyles.content]}>
                    <View style={[commonStyles.flex1, commonStyles.flexColumn, {justifyContent: 'space-around'}]}>
                        <MyText color={'#333'} fontSize={20} fontWeight={'500'} numberOfLines={1}>{item.title}</MyText>
                        <MyText color={'#333'} fontSize={15}>{`${moment(item.started).format('A HH:mm')}至${moment(item.ended).format('A HH:mm')}`}</MyText>
                    </View>
                    <Line/>
                </View>
                {/*地址*/}
                <View style={[activeStyles.listItem, activeStyles.item]}>
                    <MyText color={'#333'} fontSize={12}>{item.address}</MyText>
                </View>
                <View style={{paddingLeft: 10, backgroundColor: '#fff'}}>
                    <Line type={'dashed'}/>
                </View>
                {/*成员*/}
                <View style={[activeStyles.listItem, activeStyles.item, commonStyles.flexRow]}>
                    <View style={[commonStyles.flex1, commonStyles.flexRow]}>
                        {/*{this.renderMembers(item.members)}*/}
                    </View>
                    <TouchableOpacity onPress={this.joinOrLeaveActive.bind(this,item)}>
                        <View
                            style={[commonStyles.flexRow, groupStyles.joinBtn, item.isJoin ? groupStyles.isJoin : null]}>
                            <MyIcon name={!item.isJoin ? 'icon-jia1' : 'icon-gou'}
                                    color={item.isJoin ? '#999' : '#000'} size={15}/>
                            <MyText fontSize={15} style={{marginLeft: 5}}
                                    color={item.isJoin ? '#999' : '#000'}>{item.isJoin ? '已加入' : '加入'}</MyText>
                        </View>
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
        )
    };

    render() {
        return (
            <View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: '我的活动', tintColor: '#fff'}}
                />
                <View style={commonStyles.flex1}>
                    <FlatList data={this.props.active.userJoinedActiveList}
                              extraData={this.state}
                              renderItem={this.renderItem}
                              ItemSeparatorComponent={() => <Line height={10} color={'#f4f4f4'}/>}
                              keyExtractor={(item) => item.id}/>
                </View>

            </View>
        );
    }
}


export default connect(
    ({auth, active}) => ({auth, active})
)(MyActivesPage);